<template>
	<view class="pages">
		<view class="nav-bar">
			<view class="nav-bar-back">
				<u-icon name="arrow-leftward" size="45rpx" color="#fff"  @tap="BackHome"></u-icon>
				<text style="margin-left: 30rpx;">专辑</text>
			</view>
			<view class="nav-bar-center"></view>
			<view class="nav-bar-more">
				<u-icon name="more-dot-fill" size="45rpx" color="#fff"></u-icon>
			</view>
		</view>
		<view class="bg" :style='{"background-image":"url("+info.coverUrl+")"}'></view>

		<view class="info">
			<view class="avatar">
				<view class="avatar-circle"></view>
				<image :src="info.coverUrl" mode=""></image>
			</view>
			<view class="titles">
				<view class="titles-top">
					<text class="albumName">{{info.albumName}}</text>
					<text class="artistName">歌手：{{info.artistName}} > </text>
				</view>
				<view class="titles-bottom">
					<text>发行时间：{{product.pubTime | time}}</text>
					<view class="times-info">
						<text class="tips" v-if="product.descr">{{product.descr[0].resource}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>

				</view>
			</view>
		</view>


		<!-- 收藏/评论/分享 -->
		<view class="songs-more">
			<view class="songs-more-content">
				<view class="songs-more-content-left" @click="collect">
					<u-icon name="star" size="28px" v-if="t==0"></u-icon>
					<u-icon name="checkmark-circle" size="28px" v-else></u-icon>
					<text>{{arrs.subCount}}</text>
				</view>
				<!-- 评论 -->
				<view class="songs-more-content-center" @tap="comment">
					<u-icon name="chat" size="28px"></u-icon>
					<text>{{arrs.commentCount}}</text>
				</view>
				<view class="songs-more-content-right">
					<u-icon name="share" size="28px"></u-icon>
					<text>{{arrs.shareCount}}</text>
				</view>
			</view>
		</view>

		<!-- 数字专辑购买 -->
		<view class="buy">
			<view class="buy-left">
				<image src="@/static/icon/dish.png" mode=""></image>
				<text class="buy-left-title">数字专辑销售中</text>
			</view>
			<view class="buy-right">
				<text>已售{{arrs.sales | count}}张</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="play-all">
			<view class="icon_title">
				<image src="@/static/songs/bofang_icon.png" mode=""></image>
				<text class="name">播放全部</text>
				<text class="length">({{result.length}})</text>
			</view>
			<view>
				<u-icon name="list" size="45rpx"></u-icon>
			</view>
		</view>

		<!-- 渲染列表 -->
		<view class="play_list" v-for="(item,index) in result" :key="index">
			<view class="play_list-title" @tap="playMusic(item.id,index)">
				<view class="play_list-title-index">
					<text>{{index + 1}}</text>
				</view>
				<view class="play_list-title-txt">
					<text>{{item.name}}</text>
					<view class="play_list-title-txt-user">
						<text>{{item.ar[0].name }}-{{item.al.name}}</text>
					</view>
				</view>
			</view>
			<view class="play_list-icons">
				<view>
					<u--image src="../../static/songs/mvs.png" v-if="item.mv!==0" width="28px" height="28px"
						@tap="playmv(item)"></u--image>
				</view>
				<view>
					<u--image src="../../static/songs/more.png" width="28px" height="28px"></u--image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		_getAlbum,
		_getAlbumDetail,
		_getMunefun,
		_getCollect
	} from '@/http/search2.js'

	import moment from 'moment'
	export default {
		data() {
			return {
				aid: "", //储存传过来的id
				result: [],
				info: [],
				product: [],
				arrs: [],
				isActive: false, //判断是否已收藏
				coll: "",
				t: "",
			};
		},
		onLoad(e) {
			this.aid = e.id
		},
		methods: {
			//进入专辑评论
			comment() {
				uni.navigateTo({
					url: '/view/listcomments/listcomments?id=' + this.aid
				})
			},
			// 回到首页
			BackHome() {
				uni.navigateBack({
					data: 1
				})
			},

			async Album() {
				const {
					songs = []
				} = await _getAlbum(this.aid)
				this.result = songs
				console.log(this.result);
			},
			async getAlbumDetail() {
				const {
					album = [],
						product = []
				} = await _getAlbumDetail(this.aid)
				this.info = album;
				this.product = product
				console.log(this.product);
			},
			async getMunefun() {
				const arr = await _getMunefun(this.aid)
				this.arrs = arr
				console.log(this.arrs);
			},

			// 收藏与取消收藏专辑
			async collect() {
				if (this.t == 0) {
					this.t = 1
					const obj = await _getCollect(this.t, this.aid)
					this.isActive = true
					uni.showToast({
						title: '已收藏',
						duration: 2000
					});
				} else if (this.t == 1) {
					this.t = 0
					const res = await _getCollect(this.t, this.aid)
					this.isActive = false
					uni.showToast({
						title: '取消收藏成功',
						duration: 2000
					});
				}
			},

		},
		mounted() {
			this.Album()
			this.getAlbumDetail()
			this.getMunefun()
		},
		filters: {
			time(time) {
				return moment(time).format('yyyy.M.D');
			},
			count(v) {
				return v > 10000 ? (v / 10000).toFixed(1) + '万' : v
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		// background-color: #f6f6f6;
	}

	.bg {
		z-index: -1;
		width: 100%;
		height: 450rpx;
		position: absolute;
		top: 0;
		background-size: 100000px;
	}

	.nav-bar {
		height: 85rpx;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		color: #fff;

		&-back,
		&-more {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-center {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}

	.info {
		margin: 15rpx 30rpx;
		display: flex;
		color: #fff;

		.avatar {
			width: 40vw;
			position: relative;

			&-circle {
				width: 80%;
				height: 250rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: #000000;
			}

			image {
				position: absolute;
				top: 40rpx;
				width: 80%;
				height: 230rpx;
				border-radius: 15rpx;
			}
		}

		.titles {
			margin-top: 25rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&-top {
				display: flex;
				flex-direction: column;
				line-height: 65rpx;

				.albumName {
					font-size: 35rpx;
				}

				.artistName {
					color: #e2e2e2;
					font-size: 20rpx;
				}
			}

			&-bottom {
				display: flex;
				flex-direction: column;
				font-size: 15rpx;
				line-height: 45rpx;
				color: #999;

				.times-info {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.tips {
						width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

		}
	}

	// 歌单评论点赞等
	.songs-more {
		width: 100%;
		font-size: 35rpx;

		&-content {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background-color: #fff;
			width: 80%;
			margin: 44rpx auto;
			height: 70rpx;
			border-radius: 50px;
			padding: 30rpx;
			box-shadow: 0px 11px 7px -12px;

			view {
				display: flex;
				align-items: center;
			}

			image {
				width: 45rpx;
				height: 45rpx;
				padding: 0 10px;
				vertical-align: middle;
			}
		}
	}

	.buy {
		margin: 0 30rpx;
		padding: 15rpx 30rpx;
		border: .5rpx solid #ebebeb;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left {
			display: flex;
			align-items: center;

			&-title {
				font-size: 18rpx;
				margin-left: 15rpx;
			}

			image {
				width: 45rpx;
				height: 45rpx;
			}
		}

		&-right {
			display: flex;
			font-size: 18rpx;
		}

	}

	.play-all {
		margin: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon_title {
			display: flex;
			align-items: center;

			image {
				width: 45rpx;
				height: 45rpx;
			}

			.name {
				margin: 0 15rpx;
				font-size: 35rpx;
			}

			.length {
				font-size: 25rpx;
				color: #999;
			}
		}
	}


	.play_list {
		height: 100rpx;
		// margin-bottom: 18rpx;
		margin: 0 15rpx 15px 18rpx;
		display: flex;
		justify-content: space-between;
		font-family: STXihei;

		&-title {
			display: flex;
			align-items: center;
			flex: 8;
			margin-left: 15rpx;

			&-index {
				color: #909090;
				font-size: 30rpx;
				width: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
			}

			&-txt {
				margin-left: 50rpx;
				display: flex;
				flex-direction: column;
				width: 420rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&-user {
					font-size: 12px;
					color: #a6a6a6;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			&-content {
				padding-left: 8px;
				display: flex;
				align-items: center;
			}
		}

		&-icons {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 2;
		}
	}
</style>
